<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>设备</title>
    <meta name="keywords" content="设备">
    <meta name="description" content="设备">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="<?= base_url('assets/css/bootstrap.min.css?v=3.3.6') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/font-awesome.css?v=4.4.0') ?>" rel="stylesheet">

    <!-- Data Tables -->
    <link href="<?= base_url('assets/css/plugins/dataTables/dataTables.bootstrap.css') ?>" rel="stylesheet">

    <link href="<?= base_url('assets/css/animate.css') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/style.css?v=4.1.0') ?>" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><small>字典类型</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
<!--                            <ul class="dropdown-menu dropdown-user">-->
<!--                                <li><a href="table_data_tables.html#">选项1</a>-->
<!--                                </li>-->
<!--                                <li><a href="table_data_tables.html#">选项2</a>-->
<!--                                </li>-->
<!--                            </ul>-->





                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>







                    <div class="ibox-content">
                        <button type="button" class="btn btn-primary"  id="btn_add" >
                            添加字典
                        </button>



                        <button class="btn btn-success " type="button" onclick="download_dictionary()"><i class="fa fa-download"></i>&nbsp;&nbsp;<span class="bold">导出字典</span>
                        </button>


                        <div class="form-group">
                            <label class="col-sm-5 control-label"></label>
                            <div class="col-sm-3">
                                <select name="search_type" id="search_type" aria-controls="DataTables_Table_0" class="form-control input-sm"  onchange="search_type_change()">

                                    <option value="0">全部</option>
                                    <?php foreach ($dictionary_types as $type): ?>
                                        <li>
                                            <option value="<?=$type['id'] ?>"><?= $type['name']?></option>
                                        </li>

                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>



                        <table class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>




                                </thead>
                                <tbody>




                                </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="modal inmodal fade" id="dictionaryModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form class="m-t" role="form" id="q_form" action="index.html">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                            </button>
                            <h4 class="modal-title">添加字典</h4>
                        </div>

                        <div class="modal-body">

                            <input type="hidden" name="id" id="id" value="0">

                            <div class="form-group"><label>类型</label>
                                <select name="type_id" id="type_id" aria-controls="DataTables_Table_0" class="form-control input-sm" onchange="dtype_change()">
                                    <?php foreach ($dictionary_types as $type): ?>
                                        <li>
                                            <option value="<?=$type['id'] ?>"><?= $type['name']?></option>
                                        </li>

                                    <?php endforeach; ?>

                                </select>
                             </div>

                            <div class="form-group"><label>排序</label>
                                    <input type="number" name="display_order" id="display_order" placeholder="请输入排序序号" class="form-control">
                            </div>

                            <div class="form-group"><label>名称</label>
                                <input type="text" name="name" id="name" placeholder="请输入项目名称" class="form-control">
                            </div>

                            <div class="form-group"><label>键(key)</label>
                                <input type="text" name="dkey" id="dkey" placeholder="请输入键" class="form-control">
                            </div>

                            <div class="form-group"><label>语言键(lang_key)</label>
                                <input type="text" name="lang_key" id="lang_key" placeholder="请输入语言键" class="form-control">
                            </div>

                            <div class="form-group"><label>值(value)</label>
                                <input type="text" name="dvalue" id="dvalue" placeholder="请输入值" class="form-control">

                            </div>

                            <div class="form-group"><label>扩展值(extra_value)</label>
                                <input type="text" name="extra_value" id="extra_value" placeholder="请输入扩展值" class="form-control">

                            </div>

                            <div class="form-group"><label>单位(unit)</label>
                                <input type="text" name="unit" id="unit" placeholder="请输入单位" class="form-control">

                            </div>

                            <div class="form-group"><label>版本(version)</label>
                                <input type="number" name="version" id="version" placeholder="请输入版本号" class="form-control">

                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="btn_save">保存</button>
                        </div>

                </form>
            </div>
        </div>
    </div>

    
    <!-- 全局js -->


    <?php include "include/admin_foot_script.php" ?>

    <!-- Data Tables -->
    <script src="<?= base_url('assets/js/plugins/dataTables/jquery.dataTables.js') ?>"></script>
    <script src="<?= base_url('assets/js/plugins/dataTables/dataTables.bootstrap.js') ?>"></script>
    <link href="<?= base_url('assets/css/style.css?v=4.1.0') ?>" rel="stylesheet">
    <!-- 自定义js -->
    <script src="<?= base_url('assets/js/content.js?v=1.0.0') ?>"></script>




    <!-- Page-Level Scripts -->
    <script>


var table ;
        $(document).ready(function () {
             table = $('.dataTables-example').dataTable({
                "processing": true,
                "serverSide": true,
                "searching": true,
                "columns": [
                    { "title": "序号", "orderable": false, "data": null },
                    { "title": "名称", "orderable": false, "data": 'name' },
                    { "title": "排序", "orderable": true, "data": 'display_order' },
                    { "title": "类型", "orderable": true, "data": 'tname' },
                    { "title": "键", "orderable": false, "data": 'dkey' },
                    { "title": "语言键", "orderable": false, "data": 'lang_key' },
                    { "title": "内容", "orderable": false, "data": 'dvalue' },
                    { "title": "额外值", "orderable": false, "data": 'extra_value' },
                    { "title": "版本", "orderable": true, "data": 'version' },
                    { "title": "单位", "orderable": false, "data": 'unit' },
                    { "title": "创建时间", "orderable": true, "data": "createtime" },
                    { "title": "操作", "orderable": true, "data": null }
                ],

                columnDefs:[{
                    targets: 11,
                    render: function (data, type, row, meta) {
                        return ' <button type="button"  class="btn btn-danger btn-xs" onclick="delete_dictionary_item('+row.id+', \''+ row.name + '\')"><i class="fa fa-trash"></i>删除</button>'

                            +
                            '&nbsp &nbsp' +
                            ' <button type="button"  class="btn btn-info btn-xs btn-edit" ><i class="fa fa-pencil"></i>编辑</button> ';
                            ;
                    }
                },

                ],

            "ajax": {
                "url": "<?= base_url('admin/app/dictionary_item') ?>",
                    "data": function ( d ) {
                        d.search_type = $("#search_type").val();


                },
                "type": "POST"
            },

                "fnDrawCallback": function() {
                    var api = this.api();
                    var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
                    api.column(0).nodes().each(function (cell, i) {
                        cell.innerHTML = startIndex + i + 1;
                    });
                }

            });



            $('.dataTables-example tbody').on( 'click', '.btn-edit', function () {
                var data = $('.dataTables-example').DataTable().row($(this).parents('tr')).data();
                $("#type_id").val(data.type_id);
                $("#id").val(data.id);
                $("#display_order").val(data.display_order);
                $("#name").val(data.name);
                $("#dkey").val(data.dkey);
                $("#lang_key").val(data.lang_key);
                $("#dvalue").val(data.dvalue);
                $("#extra_value").val(data.extra_value);
                $("#unit").val(data.unit);
                $("#version").val(data.version);
                $('#dictionaryModal').modal('show');
            } );


            $("#btn_add").click(function () {
                $("#id").val(0);
                $("#display_order").val(1);
                $("#name").val("");
                $("#dkey").val("");
                $("#lang_key").val("");
                $("#dvalue").val("");
                $("#extra_value").val("");
                $("#unit").val("");
                $("#version").val("1");
                dtype_change();

            });



        });


function download_dictionary() {
    window.location.href = "<?= base_url('admin/app/download_dictionary') ?>";
}

function search_type_change() {
    table.api().ajax.reload();
}

function dtype_change() {

    $.post("<?= base_url('admin/app/display_order') ?>", {"typeid": $("#type_id").val()}, function (res) {

        if (res.code == 200) {

            $("#display_order").val(res.display_order);

            $('#dictionaryModal').modal('show');

        } else {
            // toastr.error(res.msg, '提示');
        }

    }, "json");
}


$(function () {

    var icon = "<i class='fa fa-times-circle'></i> ";

    $("#q_form").validate({
        rules: {
            display_order: {
                required: true
            },
            name : {
                required: true
            },
            dkey : {
                required: true
            },
            dvalue : {
                required: true
            },

            version : {
                required: true
            }
        },

        messages: {
            display_order: icon + "请输入排序",
            name: icon + "请输入名称",
            dkey: icon + "请输入键",
            dvalue: icon + "请输入值",
            version: icon + "请输入版本号"
        },

        submitHandler: function (form) {
            addDictionaryItem();
        }
    });


});


var submiting = false;

function  addDictionaryItem() {

    if (submiting) {
        toastr.warning("登录中.....", '提示');
        return;
    }

    var submitData = {
        "id": $("#id").val(),
        "type_id": $("#type_id").val(),
       "display_order": $("#display_order").val(),
        "name": $("#name").val(),
        "dkey": $("#dkey").val(),
        "lang_key": $("#lang_key").val(),
        "dvalue": $("#dvalue").val(),
        "extra_value": $("#extra_value").val(),
        "unit": $("#unit").val(),
        "version": $("#version").val()
    };

    $.post("<?= base_url('admin/app/add_dictionary_item') ?>", submitData, function (res) {

        submiting = false;
        if (res.code == 200) {
            $('#dictionaryModal').modal('hide');
            table.api().ajax.reload();
            toastr.success("创建字典成功", '提示');
        } else {
            toastr.error(res.msg, '提示');
        }

    }, "json");

}
        function delete_dictionary_item(id, name) {
            layer.confirm('确认要删除'+name+'字典？', {
                btn: ['确认','取消'], //按钮
                shade: true, //不显示遮罩,
                shadeClose: true
            }, function(index){
                $.post("<?= base_url("admin/app/delete_dictionary_item") ?>", {"id": id} ,function (res) {
                    layer.close(index);
                    if (res.code == 200) {
                        table.api().ajax.reload();
                        toastr.success("删除成功", '提示');
                    } else {
                        toastr.error(res.msg, '提示');
                    }
                }, "json");

            }, function(){
                //parent.layer.msg('奇葩么么哒', {shift: 6});
            });
        }





    </script>



</body>

</html>
